import React, { Component } from 'react';
// import {withRouter} from 'react-router-dom'
import { Layout, Menu, Breadcrumb,Avatar, Image,Popconfirm, message } from 'antd';
// import {withRouter} from 'react-router-dom'
import CheckLogin from '@/hoc/CheckLogin'
//引入二级路由
import Routes from '@/router/nest'
//引入请求模块
import Model from '@/models/common'
//样式
import '@/assets/css/home.css'
import Times from '@/components/Times'
// import '@//Index.css'
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
  PoweroffOutlined
} from '@ant-design/icons';
const { Header, Content,Sider } = Layout;
const { SubMenu } = Menu;
class Index extends Component {
    state = {
        collapsed: false,
        //管理员信息是否加载完毕
        isGetInfo:false,
        //管理员信息
        userInfo:{},
        //面包屑
        breadcrumb:[],
        //欢迎信息显示与否
        isShow:false,
        //退出提示框显示
        visible:false,
      };
    render() {
        const { collapsed,breadcrumb,isShow,userInfo,visible} = this.state;
        return (
            <div>
                 <Layout style={{ minHeight: '100vh' }}>
                    <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" >
                        <img src="https://ftp.bmp.ovh/imgs/2021/06/b79cef785a10c826.jpg" width="80%"style={{marginLeft:'10%'}}alt="" />
                    </div>
                    <Menu theme="dark" defaultSelectedKeys={isShow?['1']:['0']} mode="inline" onClick={this.getMenu}>
                        <SubMenu key="sub1" icon={<UserOutlined />} title="用户管理">
                            <Menu.Item key="1">用户列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" icon={<TeamOutlined />} title="角色管理">
                            <Menu.Item key="2" >角色列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" icon={<PieChartOutlined />} title="商品管理">
                            <Menu.Item key="3">商品列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub4" icon={<DesktopOutlined />} title="产品管理">
                        <Menu.Item key="4">产品列表</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="5" icon={<FileOutlined />}>
                            Files
                        </Menu.Item>
                    </Menu>
                    </Sider>
                    <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 ,height:'90px' }} >
                        
                        <div className="welcomeWord">
                                <span>
                                    欢迎你   <span style={{margin:'10px',fontSize:'22px'}}>{userInfo.username?userInfo.username:''}</span>
                                    <Avatar
                                        src={<Image src="https://ftp.bmp.ovh/imgs/2021/06/ce67b317588b93c3.jpg" />}
                                        />
                                </span>
                                <Popconfirm title="确定退出?" visible={visible} okText="确定" cancelText="取消" onConfirm={this.logout} onCancel={this.cancelLogout}>
                                    <PoweroffOutlined style={{ cursor: "pointer" ,marginLeft:'100px',fontSize:'22px',marginRight:'50px',}} onClick={this.showPopconfirm}/>
                                </Popconfirm>,
                            
                        </div>
                        <div className="header-bottom">
                            <span className="Ltitle">{breadcrumb[1]}</span>
                            <span className="timeArea"><Times/></span>
                        </div>
                    </Header>
                    <Content style={{ margin: '0px 16px 0 10px' ,height:"100%"}}>
                        {
                            isShow?<Breadcrumb style={{ margin: '16px 0',paddingLeft:"20px" }}>
                        <Breadcrumb.Item>{breadcrumb[0]}</Breadcrumb.Item>
                        <Breadcrumb.Item>{breadcrumb[1]}</Breadcrumb.Item>
                        </Breadcrumb>
                        :<div>
                            <Breadcrumb style={{ margin: '16px 0', paddingLeft:"20px"}}>
                        <Breadcrumb.Item>后台首页</Breadcrumb.Item>
                        </Breadcrumb>
                        </div>
                        }
                        
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 560 }}>
                            { isShow?<Routes />: <div className="welcomeInfo">欢迎来到某不知名后台管理系统</div>}
                        </div>
                    </Content>
                    </Layout>
                </Layout>
            </div>
        );
    }
    componentDidMount(){
        if(!localStorage.getItem('jwt'))
        {
            this.props.history.push("/login")
        }
        else {
            this.props.history.push("/home")
            //获取登录人的信息
            Model.adminInfo().then(ret=>{
                    if(ret.errNo===0){
                        localStorage.setItem("loginname",ret.accountInfo.username)
                    this.setState(()=>{
                        return {
                            userInfo:ret.accountInfo,
                        }
                    })
                }
                else if(ret.errNo ===888888){
                    message.error('JWT已经过期 ，请重新登录',2,()=>{
                        localStorage.removeItem("jwt")
                        this.props.history.push("/login")
                    })
                }
                
            })
        }
    }   
    //退出登录
    logout=()=>{
            this.showPopconfirm(false)
            localStorage.removeItem("jwt")
            this.props.history.push("/login") 
    }
    showPopconfirm=(flag)=>{
        this.setState(()=>{
            return{
                visible:flag
            }
        })
    }
    cancelLogout=()=>{
        this.showPopconfirm(false)
    }
    
    getMenu=(e)=>{
       let menuArr =['/home/userlist','/home/role','/home/goods','/home/product','/home/charts']
       let breakArr = [['用户管理','用户列表'],['角色管理','角色列表'],['商品管理','商品列表'],['产品管理','产品列表'],['图表','各类图表']]
       this.setState(()=>{
           return {
                isShow:true,
               breadcrumb:breakArr[e.key-1]
           }
       })
       this.props.history.push(menuArr[e.key-1])
    }
    onCollapse = collapsed => {
        this.setState({ collapsed });
      };
}

export default CheckLogin(Index);
